<style lang="scss">
.z-crud-grid-view {
}
</style>

<template>
  <div class="z-crud-grid-view">
    <!--    <div class="grid-view-record" v-for="record in data"> {{record}}</div>-->
    <!--    {{items.length}} {{modeList.length}}-->
    <z-view-mode
        v-bind="ctxProps"
        :iconOptions="iconOptions"
        :modeList="modeList"
        :otherIconOptions="otherIconOptions"
        :props="props"
        :span="modeSpan"
        :topStatus="topStatus"
        @triggerIcons="triggerIcons"
        @triggerStatus="triggerStatus"
    >
      <template #content="scope">
        <z-render-jsx :def="outSlots.content" :scope="{...scope, ...exportScope}"></z-render-jsx>
      </template>
    </z-view-mode>
  </div>
</template>

<script>
import CurdHelper from "../../ext/CurdHelper";

// console.log(CurdHelper)

export default CurdHelper.defineView({
  name: "ZCrudGridView",
  watch: {
    items() {
      // console.log('sdsds')
      this.reloadItems()
    }
  },
  data() {
    // console.log(this.ctxProps)
    let topStatus = [
      {
        status: '1',
        color: '#ff7551',
        size: 'small',
        text: '异常',
      },
      {
        status: '2',
        color: '#2dc265',
        size: 'small',
        text: '正常',

      },
      {
        status: '3',
        color: '#4e6ff0',
        size: 'small',
        text: '完结',
      },
      {
        status: '4',
        color: '#ffc208',
        size: 'small',
        text: '预警',
      },
      {
        status: '5',
        color: '#9b9b9b',
        size: 'small',
        text: '初始',
      },
    ]
    // console.log('ZCrudGridView', this.items)
    return {
      //底部按钮显示内容，属性不可传
      exportScope: {},
      iconOptions: [],
      modeList: [],
      modeSpan: 4,
      //其它按钮显示
      otherIconOptions: [],
      //顶部状态筛选按钮
      topStatus,
      ...this.ctxProps,
    }
  },
  mounted() {
    this.reloadItems()
  },
  methods: {
    reloadItems() {
      let self = this
      self.exportScope = {
        viewName: 'z-view-mode',
        columns: this.columns,
        columnDefMap: this.columnDefMap,
        getColumnItem(item) {
          let ret = {}
          this.columns.forEach(column => {
            if (item.hasOwnProperty(column.prop)) {
              ret[column.prop] = item[column.prop]
            }
          })
          // console.log(ret)
          return ret
        },
        getColumnByKey(key) {
          let ret = this.columns.find(v => v.prop === key)
          return ret
        }
      }
      self.modeList = this.items.map(item => {
        let statusInfo = self.topStatus.find(v => item.status === v.status)
        return {
          // code: 120,
          // title: "任务1任务1任务1任务1任务1任务1",
          ...item,
          ...statusInfo
        }
      })
    },
    //触发顶部按钮方法
    triggerStatus(...args) {
      // this.$message.info(item.text)
      let a = args.concat({actions: this.actions})
      this.actions.fire('triggerStatus', ...a)
    },
    //触发底部icon方法
    triggerIcons(item, row) {
      // console.log(item, row, this.actions)
      if (item.action === 'detail') {
        this.actions.table__detail(row)
      } else if (item.action === 'edit') {
        this.actions.table__edit(row)
      } else if (item.action === 'delete') {
        this.actions.table__delete(row)
      }
      this.actions.fire('triggerIcons', item, row, {actions: this.actions})
    },
    //分页
    currentChange(page) {
      // console.log(page)
      // this.$message.info(page)
    }
  }
})
</script>

